<style scoped>
.salesStockStatistics{
  margin-right: 15px;
  padding: 0 15px;
  background-color: white;
  height: 94.5vh;
  position: relative;
}
.saleSt{
  padding: 13px 0;
  display: flex;
}
.saleSt p:first-child,.saleSt1 p{
  margin: 7px 6px 0 0;
  display: inline-block;
  white-space:nowrap;
}
.e-inp{
  width: 160px;
  margin-top: 5px;
}
.saleSt P:not(:first-child){
  margin: 7px 6px 0 12px;
      white-space:nowrap;
      display: inline-block;
}
.saleSt1{
  margin-bottom: 14px;
}
.saleSt_b{
  display: flex;
  justify-content: space-between;
  padding: 15px 0;
}
.footView span{
    float: left;
    margin-right: 48px;
    line-height: 6vh;
    font-size: 14px;
  }
  .footView span i{
    margin-right: 5px;
  }
  .saleSt1{
    display: flex;
  }
</style>

<style>
.salesStockStatistics .saleSt .el-input__inner,.salesStockStatistics .saleSt1 .el-input__inner{
  height: 30px !important;
}
.salesStockStatistics .saleSt_b .el-checkbox.is-bordered{
  height: 30px;
  padding: 5px 10px 0 10px;
}
.salesStockStatistics .saleSt_b .el-checkbox{
  margin-right: 5px;
}
.salesStockStatistics .saleSt .block .el-date-editor .el-range-separator{
  line-height: 22px;
  width: 8%;
}
.salesStockStatistics .saleSt .block .el-date-editor .el-range__icon{
  line-height: 23px;
}
.salesStockStatistics .saleSt .el-range-editor.el-input__inner{
  margin-top: 5px;
}
.salesStockStatistics .saleSt .el-input__icon{
  line-height: 30px;
}
.salesStockStatistics .saleSt .el-date-editor .el-range__close-icon{
  line-height: 25px;
}

</style>

<template>
  <div class="salesStockStatistics">
    <div style="border-bottom: 2px solid #f4f4f4;">
    <div class="saleSt">
      <p>款号</p>
        <el-input class="e-inp" v-model="kindsNumber" ></el-input>
        <!-- <el-cascader
          v-model="kindsNumber"
          :options="kindsNumberList"
          :props="props"
          collapse-tags
          clearable>
        </el-cascader> -->

        <p>客户</p>
        <el-input v-model="customerNo" style="width:60px;margin-right:10px;height:30px;margin-top:5px;" @blur="change1" :disabled="jxAgent"></el-input>
        <el-select :disabled="jxAgent"
          @change="Change"
          style="width:100px;height:30px;margin-top:5px;"
          v-model="customerName"
          placeholder="请选择">
          <el-option
            v-for="item in customerList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            <span style="float:left">{{item.value1}}</span>
            <span style="float:right">{{item.label}}</span>
          </el-option>
        </el-select>

      <p>日期</p>
      <div class="block">
        <el-date-picker
          unlink-panels
          v-model="timeDate"
          type="daterange"
          range-separator="至"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </div>

      <p>品牌</p>
      <el-input v-model="brandedName" class="e-inp"></el-input>

      <p>供应商</p>
      <el-select class="e-inp" v-model="manufacturerName" clearable>
        <el-option
          v-for="item in manufacturerNoList"
          :key="item.value+Math.random()"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <p>季度</p>
      <el-select class="e-inp" v-model="quarterList" multiple collapse-tags>
        <el-option
          v-for="item in QList"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <p>品名</p>
      <el-select class="e-inp" v-model="commodityName" clearable>
        <el-option
          v-for="item in commodityNameList"
          :key="item.value+Math.random()"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      
      
    </div>
    <div class="saleSt1">
      <p>显示</p>
      <el-input v-model="Show" class="e-inp" placeholder="                        名"></el-input>
    </div>
    </div>

    <div class="saleSt_b">
      <div>
      <el-button @click="query" type="primary" icon="el-icon-search">查询</el-button>
      <el-button @click="Exp" icon="el-icon-upload2">导出</el-button>
      </div>
      <div>
        <el-checkbox v-model="isSingleStyleNumber" border>单款进销存明细</el-checkbox>
      </div>
    </div>

    <div>
      <el-table
      id="outTable"
      :data="dataList"
      style="width: 100%"
      :header-cell-style="{background:'#f4f4f4',padding:0,height:'40px'}"
      :cell-style="{padding:0,height:'36px'}"
      highlight-current-row>
      <template v-for="i in saleStList" >
        <el-table-column
          :prop="i.prop"
          :sortable="sort"
          :label="i.label"
          :width="i.width"
          :key="i.prop+Math.random()">
        </el-table-column>
      </template>
      </el-table>
    </div>

    <foot-view class="footView" 
      :pagesNum="pagesNum"
      :hasPagination=true
      :pageSize="limit"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange">
      <div slot="text">
        <el-popover
          placement="top-start"
          width="120"
          max-height="100px"
          trigger="click">
          <!-- <el-checkbox-group v-model="selectHeaderList" >
            <el-checkbox 
              v-for="i in headerList" 
              :label="i.value" 
              :key="i.value+Math.random()"
              style="margin-bottom:7px"></el-checkbox>
          </el-checkbox-group> -->
          <i slot="reference" class="el-icon-date">  表头配置</i>
        </el-popover>
        <span>数据库：{{jxQuarter}}</span>
      </div>
    </foot-view>

  </div>
</template>

<script>
import footView from '../../../components/FootView'
import outex from '../../../components/mixins/outexp'
import today from '../../../components/mixins/today'
import {getANumber,getManufacturer} from '../../../network/manufacturer'
import {getQuarter} from '../../../network/quarter'
import { getProductName } from '../../../network/productName'
import {getSSS} from '../../../network/warehouse'
import enterUp from '../../../components/mixins/enterUp'
import {getClient} from '../../../network/client'
export default {
  name:'sales_stock_statistics',
  mixins:[outex,today,enterUp],
  components:{
    footView
  },
  created(){
    this.saleStList = this.saleStList1;
    this.inpList = this.getInput()
    this.timeDate = [this.getLastWeek(),this.getNowTime()]; 
    //款号
    // getANumber().then(res=>{
    //   console.log(res.data)
    //   let isExist = 0
    //   res.data.data.forEach(e => {
    //     // this.kindsNumberList.push({value:e.styleNumber,label:e.styleNumber})
    //     if (!this.kindsNumberList.length) {
    //       this.kindsNumberList.push({value:e.styleNumber,label:e.styleNumber,children:[{value:e.kindsNumber,label:e.kindsNumber}]})
    //     }
    //     for (let i of this.kindsNumberList) {
    //       if (e.styleNumber == i.value) {
    //         i.children.push({value:e.kindsNumber,label:e.kindsNumber})
    //         isExist = 1
    //         break
    //       }
    //       isExist = 0
    //     }
    //     if (!isExist) {
    //       this.kindsNumberList.push({value:e.styleNumber,label:e.styleNumber,children:[{value:e.kindsNumber,label:e.kindsNumber}]})
    //     }
    //   })
    // });
    //季度
    getQuarter().then(res=>{
      console.log(res.data)
      res.data.data.forEach(e=>{
        this.QList.push({label:e.name,value:e.id})
      })
    });
    //品名
    getProductName().then(res=>{
      let list = res.data.data
      list.forEach(e=>{
        this.commodityNameList.push({label:e.name,value:e.name})
      })
    });
    //厂商供应商
    getManufacturer().then(res=>{
      console.log(res.data.data)
      res.data.data.forEach(e=>{
        this.manufacturerNoList.push({label:e.name,value:e.name})
      })
    });
    //客户
    getClient().then(res => {
      // console.log(res)
      let list = res.data.data
      list.forEach(e => {
        this.customerList.push({value:e.name,label:e.name,value1:e.no})
      })
      if (this.jxAgent) {
          for (const i of this.customerList) {
            if (i.label == this.operator) {
              this.customerNo = i.value1
              this.customerName = i.value
              break
            }
          }
        }
    });

  },
  data(){
    return{
      customerName:'',
      customerNo:'',
      customerList:[],
      jxQuarter:document.cookie.match(RegExp('jxQuarter'+'=([^;]+)'))[1],
      jxAgent: document.cookie.match(RegExp('jxAgent'+'=([^;]+)'))[1] == 1 ? true : false,
      operator: document.cookie.match(RegExp('jxUser'+'=([^;]+)'))[1],
      // props: { multiple: true },
      allData:[],
      //数据总条数
      dataLen:0,
      //总页码数
      pagesNum:0,
      //每页显示条数
      limit:20,
      // 当前页码
      currentPage: 1,
      inpList:[],
      timeDate:'',
      kindsNumber:'',
      kindsNumberList:[],
      brandedName:'',
      manufacturerName:'',
      manufacturerNoList:[],
      quarterList:[],
      QList:[],
      commodityName:'',
      commodityNameList:[],
      isSingleStyleNumber:false,
      dataList:[],
      Show:'',

      sort:true,
      saleStList:[],
      saleStList1:[
        {prop:'typeNo',
         label: '大类'},
         {prop:'styleNumber',
         label: '款号'},
         {prop:'sellingPrice',
         label: '售价'},
         {prop:'factoryInput',
         label: '厂进'},
         {prop:'factoryOut',
         label: '厂退'},
         {prop:'customerSell',
         label: '客销'},
         {prop:'deposit',
         label: '内外总存'},
         {prop:'proportion',
         label: '进销比'},
         
      ],
      saleStList2:[
        {prop:'time',
         label: '日期',
         width:'100'},
         {prop:'name',
         label: '店家'},
         {prop:'operationType',
         label: '类型'},
         {prop:'c05',
         label: '05-XS'},
         {prop:'c07',
         label: '07-S'},
         {prop:'c09',
         label: '09-M'},
         {prop:'c11',
         label: '11-L'},
         {prop:'c13',
         label: '13-XL'},
         {prop:'c15',
         label: '15-2L'},
         {prop:'c17',
         label: '17-3L'},
         {prop:'c19',
         label: '19-4L'},
         {prop:'c21',
         label: '21-5L'},
         {prop:'c23',
         label: '23-5L'},
         {prop:'f',
         label: 'D'},
         {prop:'c05Count',
         label: '存07-S'},
         {prop:'c07Count',
         label: '存07-S'},
         {prop:'c09Count',
         label: '存09-M'},
         {prop:'c11Count',
         label: '存11-L'},
         {prop:'c13Count',
         label: '存13-XL'},
         {prop:'c15Count',
         label: '存15-2L'},
         {prop:'c17Count',
         label: '存17-3L'},
         {prop:'c19Count',
         label: '存19-4L'},
         {prop:'c21Count',
         label: '存21-5L'},
         {prop:'c23Count',
         label: '存23-6L'},
         {prop:'fcount',
         label: '存D'},

      ],
    }
  },
  methods:{
    Exp(){
      let obj = {
        kindsNumber:this.kindsNumber,
        startTime:this.timeDate == null ? '' : this.timeDate[0],
        endTime:this.timeDate == null ? '' : this.timeDate[1],
        brandedName:this.brandedName,
        quarterList:this.quarterList,
        commodityName:this.commodityName,
        isSingleStyleNumber:this.isSingleStyleNumber,
        manufacturerName:this.manufacturerName,
      }
      getSSS(JSON.stringify(obj)).then(res=>{
        if(res.data.code == 200){
          this.dataList = res.data.data
          this.$nextTick(()=>{
            this.exp()
            this._getSSS({limit:this.limit,page:this.currentPage})
          })
        }
      })
    },
    handleSizeChange(val){//每页多少条
      this.limit = val
      //总页码
      this.pagesNum = Math.ceil(this.dataLen/this.limit)
      this._getSSS()
    },
    handleCurrentChange(val){//当前页
    this.currentPage = val
    this._getSSS()
    },
    query(){
      this._getSSS()
    },
    _getSSS(){
      // let kn = ''
      // if (this.kindsNumber.length) {
      //   this.kindsNumber.forEach(e => {
      //     console.log(e[1])
      //     if (!kn) {
      //       kn = `'${e[1]}'`
      //     } else {
      //       kn = `${kn},'${e[1]}'`
      //     }
      //   })
      // } //遍历数组 给元素加单引号
      let obj = {
        customerNo:this.customerNo,
        customerName:this.customerName,
        kindsNumber:this.kindsNumber,//kn
        startTime:this.timeDate == null ? '' : this.timeDate[0],
        endTime:this.timeDate == null ? '' : this.timeDate[1],
        brandedName:this.brandedName,
        quarterList:this.quarterList,
        commodityName:this.commodityName,
        isSingleStyleNumber:this.isSingleStyleNumber,
        manufacturerName:this.manufacturerName,
        limit:this.limit,
        page:this.currentPage
      }
      console.log(obj)
      console.log(JSON.stringify(obj))
      getSSS(JSON.stringify(obj)).then(res=>{
        console.log(res.data)
        if(res.data.data == null){
          this.$message({
            type: 'info',
            message: '未查询到此条件的数据'
          });
          this.dataList = []
        }else if(res.data.data != null){
          for(let u of res.data.data){
            // u.proportion = ((u.customerSell/u.factoryInput).toFixed(2)) * 100 + '%'
            u.proportion = (u.proportion*100).toFixed(2) + '%'
            if(u.operationType == 1){u.operationType = '厂进'}
            if(u.operationType == 2){u.operationType = '厂退'}
            if(u.operationType == 3){u.operationType = '客进'}
            if(u.operationType == 4){u.operationType = '客退'}
            if(u.operationType == 5){u.operationType = '调入'}
            if(u.operationType == 6){u.operationType = '调出'}
            if(u.operationType == 7){u.operationType = '盘差'}
            if(u.operationType == 8){u.operationType = '客销'}
          }
          if(this.Show == ''){       //显示
            this.allData = res.data.data
            this.dataList = this.allData.slice((this.currentPage-1)*this.limit,this.currentPage*this.limit)
            // this.dataList = res.data.data
          }else if(this.Show != ''){
          // this.dataList = res.data.data.slice(0,this.Show)
            this.allData = res.data.data
            this.dataLen = this.allData.slice(0,this.Show)
            this.dataList = this.dataLen.slice((this.currentPage-1)*this.limit,this.currentPage*this.limit)
          }
        }
      })
    },
    Change(){
      for(let u of this.customerList){
        if(this.customerName == u.label){
          this.customerNo = u.value1
        }
      }
    },
    change1(){
      for(let o of this.customerList){
        if(this.customerNo == o.value1){
          this.customerName = o.value
        }
      }
    },
  },
  watch:{
    brandedName(a,b){
      if(a){
        this.brandedName = a.toUpperCase().trim()
      }
    },
    kindsNumber(a,b){
      if(a){
        this.kindsNumber = a.toUpperCase().trim()
      }
    },
    isSingleStyleNumber(a,b){
      if (a) {
        this.saleStList = this.saleStList2
        this.sort = false
      }else{
        this.saleStList = this.saleStList1
        this.sort = true
      }
    }
  },
    dataLen(a,b){
      this.pagesNum = Math.ceil(this.dataLen/this.limit)
      console.log(this.pagesNum)
    },
    limit(a,b){
      this.pagesNum = Math.ceil(this.dataLen / this.limit)
    },
}
</script>